<template>
  <div class="com-container">
    <div ref="hot" class="com-chart" />
    <span class="iconfont arr-left" :style="comStyle" @click="toLeft">&#xe6ef;</span>
    <span class="iconfont arr-right" :style="comStyle" @click="toRight">&#xe6ed;</span>
    <span class="cat-name" :style="comStyle">{{ catName }}</span>
  </div>
</template>
<script>
// import { getHot } from '../api/sys'
import { mapState } from 'vuex'
import { getThemeValue } from '../util/theme'
export default {
  data() {
    return {
      hotChart: null,
      allData: null,
      currentIndex: 0,
      titleFontSize: 0,
      timerId: null
    }
  },
  computed: {
    catName() {
      if (!this.allData) {
        return ''
      } else {
        return this.allData[this.currentIndex].name
      }
    },
    comStyle() {
      return {
        fontSize: this.titleFontSize * 1.2 + 'px',
        color: getThemeValue(this.theme).titleColor
      }
    },
    ...mapState(['theme'])
  },
  watch: {
    theme() {
      this.hotChart.dispose() // 销毁当前的图表
      this.initChart() // 更换主题后重新渲染
      this.screenAdaptation() // 屏幕适配
      this.upDataChart() // 更新图表数据
    }
  },
  created() {
    this.$socket.registerCallBack('hotData', this.getData)
  },
  mounted() {
    this.initChart()
    this.$socket.send({
      action: 'getData',
      socketType: 'hotData',
      chartName: 'hotproduct',
      value: ''
    })
    // this.getData()
    window.addEventListener('resize', this.screenAdaptation)
    this.screenAdaptation()
  },
  destroyed() {
    clearInterval(this.timerId)
    window.removeEventListener('resize', this.screenAdaptation)
    this.$socket.unRegisterCallBack('hotData')
  },
  methods: {
    initChart() {
      this.hotChart = this.$eCharts.init(this.$refs.hot, this.theme)
      const color = ['#03acd1', '#04cab7', '#03c781', '#fce348', '#fc2d8a', '#0292fe']
      const initOption = {
        color,
        title: {
          text: '▎ 热销商品的占比',
          padding: 0,
          top: 30,
          left: 20
        },
        legend: {
          orient: 'vertical',
          icon: 'circle', // 图例形状
          padding: 0,
          bottom: 'center'
        },
        tooltip: {
          show: true,
          formatter: arg => {
            const items = arg.data.items
            const total = items.reduce((pre, cur) => {
              return pre + cur.value
            }, 0)
            const resStr = items.reduce(function(pre, cur) {
              return `${pre} ${arg.marker} ${cur.name} : ${parseInt(cur.value / total * 100)}%
              <br/>`
            }, '')
            return resStr
          }
        },
        series: [{
          type: 'pie',
          center: ['40%', '55%'],
          clockwise: true, // 顺时针排列
          startAngle: 90, // 起始角度 影响不大 // 圆心的位置
          // 只有设置了label:show=ture;position=outside 设置labelLine才会有效
          labelLine: {
            show: true, // 显示引导线
            length: 30, // 连接饼图第1段线条的长度 length length2 不写自适应
            smooth: true // 是否光滑连接线
          },
          itemStyle: {
            // 每个扇形的设置
            borderColor: 'rgba(0,0,0,.1)', // 扇形边框颜色
            borderWidth: 1 // 扇形边框大小 要先给borderColor颜色 设置borderWidth才会有效果
          },
          emphasis: {
            // 启用鼠标放上去放大效果，这个挺好的
            scale: true,
            itemStyle: {
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      this.hotChart.setOption(initOption)
      this.hotChart.on('mouseover', () => {
        clearInterval(this.timerId)
      })
      this.hotChart.on('mouseout', () => {
        this.startSetInterval()
      })
    },
    getData(res) {
      this.allData = res
      this.upDataChart()
      this.startSetInterval()
    },
    upDataChart() {
      const legendArray = this.allData[this.currentIndex].children.map(item => {
        return item.name
      })
      const values = this.allData[this.currentIndex].children.map(item => {
        return {
          name: item.name,
          value: item.value,
          items: item.children
        }
      })
      const dataOption = {
        legend: {
          data: legendArray
        },
        series: [{
          data: values
        }]
      }
      this.hotChart.setOption(dataOption)
      this.startSetInterval()
    },
    screenAdaptation() {
      this.titleFontSize = this.$refs.hot.offsetWidth / 100 * 3.6
      const screenOption = {
        title: {
          textStyle: {
            fontSize: this.titleFontSize * 1.2
          }
        },
        series: [
          {
            radius: this.titleFontSize * 4.5 // 实心圆[内半径=0，外半径] 外半径越大，圆越大
          }
        ],
        legend: {
          right: this.titleFontSize * 1.2,
          itemWidth: this.titleFontSize, // 小圆点宽度
          itemHeight: this.titleFontSize, // 小圆点高度
          itemGap: this.titleFontSize / 1.5, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
          textStyle: {
            fontSize: this.titleFontSize / 1.1
          }
        },
        emphasis: {
          scaleSize: this.titleFontSize / 2,
          itemStyle: {
            shadowBlur: this.titleFontSize / 2
          }
        }
      }
      this.hotChart.setOption(screenOption)
      this.hotChart.resize()
    },
    toLeft() {
      this.currentIndex--
      if (this.currentIndex < 0) {
        this.currentIndex = this.allData.length - 1
      }
      this.upDataChart()
    },
    toRight() {
      this.currentIndex++
      if (this.currentIndex > this.allData.length - 1) {
        this.currentIndex = 0
      }
      this.upDataChart()
    },
    startSetInterval() {
      if (this.timerId) {
        clearInterval(this.timerId)
      }
      this.timerId = setInterval(() => {
        this.toRight()
      }, 3000)
    }
  }
}
</script>

<style lang="less" scoped>
.arr-left {
  position:absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: white;
}
.arr-right {
  position:absolute;
  right: 25%;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: white;
}
.cat-name {
  position:absolute;
  left: 70%;
  bottom: 30px;
  font-weight: 600;
  color: white;
}
</style>
